开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情

在 Vue 中，ref 用于注册元素或子组件的引用

对于 ref 和 $refs 的常规操作，想必大家都有所了解，在 Vue2 中，或者说 在 非 setup 钩子中, 绑定了 ref 属性的组件可以通过 this.$refs 来获取指定元素（组件实例）。

比如，在如下是 form 表单中绑定了 ref 属性，this.$refs 会保存已注册过 ref 的所有子组件。我们在组件挂载后对它进行访问。

打开控制台可以看到输出结果：

注：

在· Vue3 中，无论是使用 setup 语法糖，还是使用 setup() 钩子函数，都是没有 this 的。

组合式 API 的实现方式：

ref 的参数类型是 string | Function，所以除上述使用方法之外，ref 还可以绑定函数，以及在 v-for 循环中获取多个组件实例：

当 ref 绑定的是函数，需要注意是带有冒号的 :ref。函数接口一个默认参数，通过获取到的 el 实例来使用里面的属性或者方法。

代码如下：

运行结果：

当有多个组件动态渲染时，可以通过绑定函数来获取全部实例，并存储在一个数组中，方便后续的操作。

其中增加了一步判断 el 是否存在的步骤，目的是为了添加全部实例，并且不重复添加，当节点个数放生变化，得到的整个数组也可以获取到全部的数据。

运行结果如下，通过 key 值即可找到对应的数据